<template>
	<div class="swiper-container" ref="detailSwiper">
		<div class="swiper-wrapper">
			<div
				class="swiper-slide"
				v-for="(slide, index) in skuInfo.skuImageList"
				:key="index"
			>
				<img
					:src="slide.imgUrl"
					@click="changeActiveImg(index)"
					:class="{ active: index == activeImg }"
				/>
			</div>
		</div>
		<div class="swiper-button-next"></div>
		<div class="swiper-button-prev"></div>
	</div>
</template>

<script>
import Swiper from "swiper";
import { mapGetters } from "vuex";

export default {
	name: "ImageList",
	data() {
		return {
			activeImg: 0,
		};
	},
	methods: {
		changeActiveImg(index) {
			this.activeImg = index;
			this.$bus.$emit("postImgIndex", index);
			// console.log(this.activeImg);
		},
	},

	computed: {
		...mapGetters("detail", ["skuInfo"]),
	},
	// 初始化swiper实例
	watch: {
		skuInfo() {
			//数据已到位~
			this.$nextTick(() => {
				new Swiper(this.$refs.detailSwiper, {
					// 如果需要前进后退按钮
					navigation: {
						nextEl: ".swiper-button-next",
						prevEl: ".swiper-button-prev",
					},
					// 一次显示的个数
					slidesPerView: "auto",
					// 一次滚动的个数
					// slidesPerGroup: 3,
				});
			});
		},
	},
};
</script>

<style lang="less" scoped>
.swiper-container {
	height: 56px;
	width: 412px;
	box-sizing: border-box;
	padding: 0 12px;

	.swiper-slide {
		width: 56px;
		height: 56px;

		img {
			width: 100%;
			height: 100%;
			border: 1px solid #ccc;
			padding: 2px;
			width: 50px;
			height: 50px;
			display: block;

			&.active {
				border: 2px solid tomato;
				padding: 1px;
			}
		}
	}

	.swiper-button-next {
		left: auto;
		right: 0;
	}

	.swiper-button-prev {
		left: 0;
		right: auto;
	}

	.swiper-button-next,
	.swiper-button-prev {
		box-sizing: border-box;
		width: 12px;
		height: 56px;
		background: rgb(235, 235, 235);
		border: 1px solid rgb(204, 204, 204);
		top: 0;
		margin-top: 0;
		&::after {
			font-size: 12px;
		}
	}
}
</style>
